import {
  Button,
  Modal,
  LegacyCard,
  LegacyTabs,
  DropZone,
  LegacyStack,
  Thumbnail,
  Text,
  TextField,
  Select,
} from "@shopify/polaris";
import { NoteMinor } from "@shopify/polaris-icons";
import { useState, useCallback } from "react";

import ModalUPLOAD from "./uploadZp";

import styled from "./index.module.less";
interface Props {
  ZPSHOW: boolean;
  setZPSHOW: (value: boolean) => void;
  MTWJs: PRODUCTMODULE.Attachments[];
}
function ModalExample({ ZPSHOW, setZPSHOW, MTWJs }: Props) {
  const handleChange = useCallback(() => setZPSHOW(!ZPSHOW), [ZPSHOW]);

  const [selected, setSelected] = useState(0);

  const handleTabChange = useCallback(
    (selectedTabIndex: number) => setSelected(selectedTabIndex),
    []
  );

  //URL
  const [valueURL, setValueURL] = useState("");

  const handleChangeURL = useCallback(
    (newValue: string) => setValueURL(newValue),
    []
  );
  const [number, setNumber] = useState(0);

  //CPZP
  const [selectedCPZP, setSelectedCPZP] = useState("CPTP");

  const handleSelectChangeCPZP = useCallback(
    (value: string) => setSelectedCPZP(value),
    []
  );

  const optionsCPZP = [
    { label: "原始尺寸", value: "YSCC" },
    { label: "内联图片(16像素)", value: "NLTP" },
    { label: "图标(32像素)", value: "TB" },
    { label: "缩略图(50像素)", value: "SLT" },
    { label: "小logo(100像素)", value: "XLOGO" },
    { label: "logo(160像素)", value: "LOGO" },
    { label: "产品缩略图(240像素)", value: "CPSLT" },
    { label: "产品图片(480像素)", value: "CPTP" },
    { label: "横幅图片(600像素)", value: "HFTP" },
    { label: "墙纸(1024像素)", value: "QZS" },
    { label: "墙纸(2048像素)", value: "QZB" },
  ];

  //SC
  const [numbers, setNumbers] = useState(0);
  const [sczps, setSczps] = useState([
    {
      source:
        "https://cdn.shopifycdn.net/s/files/1/0110/7191/4047/files/R-C.jpg?v=1692675128",
      name: 1,
    },
  ]);
  const [valueSCTP, setValueSCTP] = useState("");

  const handleChangeSCTP = useCallback(
    (newValue: string) => setValueSCTP(newValue),
    []
  );

  const [selectedSCTP, setSelectedSCTP] = useState("CPTP");

  const handleSelectChangeSCTP = useCallback(
    (value: string) => setSelectedSCTP(value),
    []
  );

  const optionsSCTP = [
    { label: "原始尺寸", value: "YSCC" },
    { label: "内联图片(16像素)", value: "NLTP" },
    { label: "图标(32像素)", value: "TB" },
    { label: "缩略图(50像素)", value: "SLT" },
    { label: "小logo(100像素)", value: "XLOGO" },
    { label: "logo(160像素)", value: "LOGO" },
    { label: "产品缩略图(240像素)", value: "CPSLT" },
    { label: "产品图片(480像素)", value: "CPTP" },
    { label: "横幅图片(600像素)", value: "HFTP" },
    { label: "墙纸(1024像素)", value: "QZS" },
    { label: "墙纸(2048像素)", value: "QZB" },
  ];

  //tap选项卡
  const tabs = [
    {
      id: "SCDTP",
      content: "上传的图片",
      accessibilityLabel: "All customers",
      panelID: "all-customers-content-1",
    },
    {
      id: "CPTP",
      content: "产品图片",
      panelID: "accepts-marketing-content-1",
    },
    {
      id: "URL",
      content: "URL",
      panelID: "repeat-customers-content-1",
    },
  ];

  //upload
  const [files, setFiles] = useState<File[]>([]);

  const handleDropZoneDrop = useCallback(
    (_dropFiles: File[], acceptedFiles: File[], _rejectedFiles: File[]) =>
      setFiles((files) => [...files, ...acceptedFiles]),
    []
  );

  const validImageTypes = ["image/gif", "image/jpeg", "image/png"];

  const fileUpload = !files.length && <DropZone.FileUpload />;
  const uploadedFiles = files.length > 0 && (
    <div style={{ padding: "0" }}>
      <LegacyStack vertical>
        {files.map((file, index) => (
          <LegacyStack alignment="center" key={index}>
            <Thumbnail
              size="small"
              alt={file.name}
              source={
                validImageTypes.includes(file.type)
                  ? window.URL.createObjectURL(file)
                  : NoteMinor
              }
            />
            <div>
              {file.name}{" "}
              <Text variant="bodySm" as="p">
                {file.size} bytes
              </Text>
            </div>
          </LegacyStack>
        ))}
      </LegacyStack>
    </div>
  );

  return (
    <div style={{ height: "500px" }}>
      <Modal open={ZPSHOW} onClose={handleChange} title="插入图片">
        <div>
          <LegacyTabs
            tabs={tabs}
            selected={selected}
            onSelect={handleTabChange}
          >
            <LegacyCard.Section>
              {selected == 0 && (
                <div>
                  <div className={styled.cpzpS}>
                    {sczps.map((item, index) => {
                      return (
                        <div
                          key={index}
                          className={
                            styled.SCCPZP +
                            " " +
                            `${numbers == index + 1 ? styled.Tactive : ""}`
                          }
                          onClick={() => {
                            setNumbers(index + 1);
                          }}
                        >
                          <Thumbnail
                            source={item.source}
                            size="large"
                            alt={item.source}
                          />
                        </div>
                      );
                    })}
                  </div>
                </div>
              )}
              {selected == 1 && (
                <div>
                  <div className={styled.cpzpS}>
                    {MTWJs.map((item, index) => {
                      return (
                        <div
                          key={index}
                          className={
                            styled.CPZPs +
                            " " +
                            `${number == index + 1 ? styled.active : ""}`
                          }
                          onClick={() => {
                            setNumber(index + 1);
                          }}
                        >
                          <Thumbnail
                            source={"https://" + item.source}
                            size="large"
                            alt={item.source}
                          />
                        </div>
                      );
                    })}
                  </div>
                </div>
              )}
              {selected == 2 && (
                <div>
                  <TextField
                    label="粘贴图片 URL"
                    value={valueURL}
                    onChange={handleChangeURL}
                    autoComplete="off"
                    placeholder="http://"
                  />
                </div>
              )}
            </LegacyCard.Section>
          </LegacyTabs>
        </div>

        {numbers > 0 && selected == 0 && (
          <div>
            <div className={styled.CCs}>
              <TextField
                label="替代文本"
                value={valueSCTP}
                onChange={handleChangeSCTP}
                autoComplete="off"
              />
              <div className={styled.tiptip}>
                为视障人士或低带宽人群撰写文件的简要描述。
              </div>
            </div>
            <div className={styled.CCs}>
              <Select
                label="尺寸:"
                options={optionsSCTP}
                onChange={handleSelectChangeSCTP}
                value={selectedSCTP}
              />
            </div>
          </div>
        )}
        {number > 0 && selected == 1 && (
          <div className={styled.CCs}>
            <Select
              label="尺寸:"
              options={optionsCPZP}
              onChange={handleSelectChangeCPZP}
              value={selectedCPZP}
            />
          </div>
        )}
        <div className={styled.footer}>
          <div className={styled.ModalBtn}>
            <div className={styled.btns}>
              <Button size="slim">取消</Button>
            </div>
            {selected == 0 ? (
              <div className={styled.btnss}>
                {/* <Button size="slim">上传文件</Button> */}
                <ModalUPLOAD />
              </div>
            ) : (
              ""
            )}
            {
              <div className={styled.btns}>
                <Button primary size="slim">
                  插入图片
                </Button>
              </div>
            }
          </div>
        </div>
      </Modal>
    </div>
  );
}

export default ModalExample;
